<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>文件上传</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<style>
    div,p,body{
        margin: 0;
        padding: 0;
    }
    .loading{
        position: fixed;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
    }
    .loadings{
        position: fixed;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
    }
    .loading>div{
        background: rgba(0,0,0,0.5);
        padding: 10px;
        border:1px solid #888;
        border-radius: 4px;
        color:#fff;
    }
    .loadings>div{
        background: rgba(0,0,0,0.5);
        padding: 10px;
        border:1px solid #888;
        border-radius: 4px;
        color:#fff;
    }
    .file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
img{
    width:100px;
}
body{
    width: 100vw;
    overflow: hidden;
}
.conter>form{
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-items: center;
}
.conter>form>a{
    margin: 10px 0;
}
.conter>form>a:nth-child(2){
    text-align: left;
}
#text{
    width: 100%;
    word-wrap: break-word;
}
</style>

<body>
    <div class="loading">
        <div id="load">正在上传...</div>
    </div>
    <div class="loadings">
        <div id="loads">上传成功</div>
    </div>
    <div style="padding:10px;" class="conter">
        <form id="index_form" name="index_form" role="form" method="post" class="form-horizontal" enctype="multipart/form-data">
            <a href="javascript:;" class="file">选择文件
                <input type="file" name="" id="upfile">
            </a>
            <a href="javascript:;" id="text" style="text-decoration:none;color:#333;">文件路径：</a>
            <a href="javascript:;" class="file">点击上传
                <input type="button" id="upJQuery" value="点击上传" onclick="a()">
            </a>
        </form>
    </div>
    <script type="text/javascript">
        function a() {
            console.log(123)
        }
        a()
        var loading = document.getElementsByClassName('loading')[0];
        var loadings = document.getElementsByClassName('loadings')[0];
        $('#upJQuery').on('click', function () {
            console.log(document.getElementById("upfile").value)
            document.getElementById("text").innerText='文件路径：'+document.getElementById("upfile").value
            console.log(document.getElementById("text"))
            loading.style.visibility = "visible";
            var fd = new FormData();
            fd.append("upload", 1);
            fd.append("multipartFile", $("#upfile").get(0).files[0]);
            $.ajax({
                url: "http://192.168.0.140:8080/jycoldchain/ColdInformationDisseminationController/upload",
                type: "POST",
                processData: false,
                contentType: false,
                data: fd,
                success: function (d) {
                    loading.style.visibility = "hidden";
                    loadings.style.visibility = "visible";
                    if (d != '') {
                        //小程序发送信息
                        setTimeout(function () {
                            loadings.style.visibility = "hidden";
                            wx.miniProgram.getEnv(function (res) {
                                if (res.miniprogram) {
                                    var info = d;
                                    var json = JSON.stringify(info);
                                    wx.miniProgram.postMessage({
                                        data: json
                                    });
                                    wx.miniProgram.navigateBack({})
                                }
                            });
                        }, 1000)
                    }
                }
            });
        });
    </script>
</body>

</html>